
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon icon">&#xe617;</i>
                    <div class="name">订阅</div>
                    <div class="code">&amp;#xe617;</div>
                    <div class="fontclass">.dingyue</div>
                </li>
            
                <li>
                <i class="icon icon">&#xc627;</i>
                    <div class="name">用户</div>
                    <div class="code">&amp;#xc627;</div>
                    <div class="fontclass">.user</div>
                </li>
            
                <li>
                <i class="icon icon">&#xe60d;</i>
                    <div class="name">附件</div>
                    <div class="code">&amp;#xe60d;</div>
                    <div class="fontclass">.fujian</div>
                </li>
            
                <li>
                <i class="icon icon">&#xe606;</i>
                    <div class="name">搜索</div>
                    <div class="code">&amp;#xe606;</div>
                    <div class="fontclass">.search</div>
                </li>
            
                <li>
                <i class="icon icon">&#xc62c;</i>
                    <div class="name">导航</div>
                    <div class="code">&amp;#xc62c;</div>
                    <div class="fontclass">.guide</div>
                </li>
            
                <li>
                <i class="icon icon">&#xc62d;</i>
                    <div class="name">表情</div>
                    <div class="code">&amp;#xc62d;</div>
                    <div class="fontclass">.smile</div>
                </li>
            
                <li>
                <i class="icon icon">&#xe618;</i>
                    <div class="name">QQ</div>
                    <div class="code">&amp;#xe618;</div>
                    <div class="fontclass">.qq</div>
                </li>
            
                <li>
                <i class="icon icon">&#xc634;</i>
                    <div class="name">全屏</div>
                    <div class="code">&amp;#xc634;</div>
                    <div class="fontclass">.full</div>
                </li>
            
                <li>
                <i class="icon icon">&#xe619;</i>
                    <div class="name">top</div>
                    <div class="code">&amp;#xe619;</div>
                    <div class="fontclass">.top</div>
                </li>
            
                <li>
                <i class="icon icon">&#xe61a;</i>
                    <div class="name">email</div>
                    <div class="code">&amp;#xe61a;</div>
                    <div class="fontclass">.email</div>
                </li>
            
                <li>
                <i class="icon icon">&#xc621;</i>
                    <div class="name">对</div>
                    <div class="code">&amp;#xc621;</div>
                    <div class="fontclass">.right-round</div>
                </li>
            
                <li>
                <i class="icon icon">&#xe600;</i>
                    <div class="name">时间</div>
                    <div class="code">&amp;#xe600;</div>
                    <div class="fontclass">.time</div>
                </li>
            
                <li>
                <i class="icon icon">&#xe607;</i>
                    <div class="name">信息</div>
                    <div class="code">&amp;#xe607;</div>
                    <div class="fontclass">.info</div>
                </li>
            
                <li>
                <i class="icon icon">&#xc622;</i>
                    <div class="name">下</div>
                    <div class="code">&amp;#xc622;</div>
                    <div class="fontclass">.down</div>
                </li>
            
                <li>
                <i class="icon icon">&#xc623;</i>
                    <div class="name">下载</div>
                    <div class="code">&amp;#xc623;</div>
                    <div class="fontclass">.download</div>
                </li>
            
                <li>
                <i class="icon icon">&#xc638;</i>
                    <div class="name">女</div>
                    <div class="code">&amp;#xc638;</div>
                    <div class="fontclass">.female</div>
                </li>
            
                <li>
                <i class="icon icon">&#xe601;</i>
                    <div class="name">群组</div>
                    <div class="code">&amp;#xe601;</div>
                    <div class="fontclass">.group</div>
                </li>
            
                <li>
                <i class="icon icon">&#xe608;</i>
                    <div class="name">减号</div>
                    <div class="code">&amp;#xe608;</div>
                    <div class="fontclass">.minus</div>
                </li>
            
                <li>
                <i class="icon icon">&#xe602;</i>
                    <div class="name">表情</div>
                    <div class="code">&amp;#xe602;</div>
                    <div class="fontclass">.face</div>
                </li>
            
                <li>
                <i class="icon icon">&#xe60c;</i>
                    <div class="name">dot</div>
                    <div class="code">&amp;#xe60c;</div>
                    <div class="fontclass">.dot</div>
                </li>
            
                <li>
                <i class="icon icon">&#xc62e;</i>
                    <div class="name">男</div>
                    <div class="code">&amp;#xc62e;</div>
                    <div class="fontclass">.male</div>
                </li>
            
                <li>
                <i class="icon icon">&#xe61b;</i>
                    <div class="name">评论</div>
                    <div class="code">&amp;#xe61b;</div>
                    <div class="fontclass">.pinglun</div>
                </li>
            
                <li>
                <i class="icon icon">&#xe603;</i>
                    <div class="name">图片</div>
                    <div class="code">&amp;#xe603;</div>
                    <div class="fontclass">.photo</div>
                </li>
            
                <li>
                <i class="icon icon">&#xc62f;</i>
                    <div class="name">链接</div>
                    <div class="code">&amp;#xc62f;</div>
                    <div class="fontclass">.link</div>
                </li>
            
                <li>
                <i class="icon icon">&#xc626;</i>
                    <div class="name">问号</div>
                    <div class="code">&amp;#xc626;</div>
                    <div class="fontclass">.question-round</div>
                </li>
            
                <li>
                <i class="icon icon">&#xe604;</i>
                    <div class="name">消息</div>
                    <div class="code">&amp;#xe604;</div>
                    <div class="fontclass">.message</div>
                </li>
            
                <li>
                <i class="icon icon">&#xc63e;</i>
                    <div class="name">哭脸</div>
                    <div class="code">&amp;#xc63e;</div>
                    <div class="fontclass">.frown</div>
                </li>
            
                <li>
                <i class="icon icon">&#xe61c;</i>
                    <div class="name">Volume</div>
                    <div class="code">&amp;#xe61c;</div>
                    <div class="fontclass">.volume</div>
                </li>
            
                <li>
                <i class="icon icon">&#xe60a;</i>
                    <div class="name">换肤</div>
                    <div class="code">&amp;#xe60a;</div>
                    <div class="fontclass">.skin</div>
                </li>
            
                <li>
                <i class="icon icon">&#xc63b;</i>
                    <div class="name">加载</div>
                    <div class="code">&amp;#xc63b;</div>
                    <div class="fontclass">.loading</div>
                </li>
            
                <li>
                <i class="icon icon">&#xc61d;</i>
                    <div class="name">首页</div>
                    <div class="code">&amp;#xc61d;</div>
                    <div class="fontclass">.shouye</div>
                </li>
            
                <li>
                <i class="icon icon">&#xc624;</i>
                    <div class="name">箭头</div>
                    <div class="code">&amp;#xc624;</div>
                    <div class="fontclass">.right</div>
                </li>
            
                <li>
                <i class="icon icon">&#xe61e;</i>
                    <div class="name">github</div>
                    <div class="code">&amp;#xe61e;</div>
                    <div class="fontclass">.github</div>
                </li>
            
                <li>
                <i class="icon icon">&#xc635;</i>
                    <div class="name">save</div>
                    <div class="code">&amp;#xc635;</div>
                    <div class="fontclass">.save</div>
                </li>
            
                <li>
                <i class="icon icon">&#xc630;</i>
                    <div class="name">二维码</div>
                    <div class="code">&amp;#xc630;</div>
                    <div class="fontclass">.qrcode</div>
                </li>
            
                <li>
                <i class="icon icon">&#xc625;</i>
                    <div class="name">箭头</div>
                    <div class="code">&amp;#xc625;</div>
                    <div class="fontclass">.left</div>
                </li>
            
                <li>
                <i class="icon icon">&#xc631;</i>
                    <div class="name">qq</div>
                    <div class="code">&amp;#xc631;</div>
                    <div class="fontclass">.qq1</div>
                </li>
            
                <li>
                <i class="icon icon">&#xc639;</i>
                    <div class="name">地点</div>
                    <div class="code">&amp;#xc639;</div>
                    <div class="fontclass">.position</div>
                </li>
            
                <li>
                <i class="icon icon">&#xc636;</i>
                    <div class="name">play-</div>
                    <div class="code">&amp;#xc636;</div>
                    <div class="fontclass">.play</div>
                </li>
            
                <li>
                <i class="icon icon">&#xc628;</i>
                    <div class="name">checkbox</div>
                    <div class="code">&amp;#xc628;</div>
                    <div class="fontclass">.checkbox</div>
                </li>
            
                <li>
                <i class="icon icon">&#xc63c;</i>
                    <div class="name">错</div>
                    <div class="code">&amp;#xc63c;</div>
                    <div class="fontclass">.error-round</div>
                </li>
            
                <li>
                <i class="icon icon">&#xe61f;</i>
                    <div class="name">查看</div>
                    <div class="code">&amp;#xe61f;</div>
                    <div class="fontclass">.204</div>
                </li>
            
                <li>
                <i class="icon icon">&#xe620;</i>
                    <div class="name">shoucang</div>
                    <div class="code">&amp;#xe620;</div>
                    <div class="fontclass">.iconfontshoucang</div>
                </li>
            
                <li>
                <i class="icon icon">&#xe616;</i>
                    <div class="name">iconfont-saomaio</div>
                    <div class="code">&amp;#xe616;</div>
                    <div class="fontclass">.iconfont</div>
                </li>
            
                <li>
                <i class="icon icon">&#xc632;</i>
                    <div class="name">声音</div>
                    <div class="code">&amp;#xc632;</div>
                    <div class="fontclass">.volume1</div>
                </li>
            
                <li>
                <i class="icon icon">&#xe60b;</i>
                    <div class="name">setting</div>
                    <div class="code">&amp;#xe60b;</div>
                    <div class="fontclass">.setting</div>
                </li>
            
                <li>
                <i class="icon icon">&#xc63d;</i>
                    <div class="name">警告</div>
                    <div class="code">&amp;#xc63d;</div>
                    <div class="fontclass">.warning-round</div>
                </li>
            
                <li>
                <i class="icon icon">&#xc629;</i>
                    <div class="name">checkbox</div>
                    <div class="code">&amp;#xc629;</div>
                    <div class="fontclass">.checkbox-checked</div>
                </li>
            
                <li>
                <i class="icon icon">&#xe605;</i>
                    <div class="name">用户</div>
                    <div class="code">&amp;#xe605;</div>
                    <div class="fontclass">.user1</div>
                </li>
            
                <li>
                <i class="icon icon">&#xe60e;</i>
                    <div class="name">花</div>
                    <div class="code">&amp;#xe60e;</div>
                    <div class="fontclass">.hua</div>
                </li>
            
                <li>
                <i class="icon icon">&#xe60f;</i>
                    <div class="name">1456296108341</div>
                    <div class="code">&amp;#xe60f;</div>
                    <div class="fontclass">.1456296108341</div>
                </li>
            
                <li>
                <i class="icon icon">&#xe610;</i>
                    <div class="name">ok</div>
                    <div class="code">&amp;#xe610;</div>
                    <div class="fontclass">.ok</div>
                </li>
            
                <li>
                <i class="icon icon">&#xe611;</i>
                    <div class="name">test</div>
                    <div class="code">&amp;#xe611;</div>
                    <div class="fontclass">.test</div>
                </li>
            
                <li>
                <i class="icon icon">&#xe612;</i>
                    <div class="name">big</div>
                    <div class="code">&amp;#xe612;</div>
                    <div class="fontclass">.big</div>
                </li>
            
                <li>
                <i class="icon icon">&#xe613;</i>
                    <div class="name">half</div>
                    <div class="code">&amp;#xe613;</div>
                    <div class="fontclass">.half</div>
                </li>
            
                <li>
                <i class="icon icon">&#xe614;</i>
                    <div class="name">wang</div>
                    <div class="code">&amp;#xe614;</div>
                    <div class="fontclass">.wang</div>
                </li>
            
                <li>
                <i class="icon icon">&#xe615;</i>
                    <div class="name">delete</div>
                    <div class="code">&amp;#xe615;</div>
                    <div class="fontclass">.delete</div>
                </li>
            
                <li>
                <i class="icon icon">&#xc633;</i>
                    <div class="name">工具</div>
                    <div class="code">&amp;#xc633;</div>
                    <div class="fontclass">.tool</div>
                </li>
            
                <li>
                <i class="icon icon">&#xc63a;</i>
                    <div class="name">应用pc</div>
                    <div class="code">&amp;#xc63a;</div>
                    <div class="fontclass">.app</div>
                </li>
            
                <li>
                <i class="icon icon">&#xc62a;</i>
                    <div class="name">Radio</div>
                    <div class="code">&amp;#xc62a;</div>
                    <div class="fontclass">.radio</div>
                </li>
            
                <li>
                <i class="icon icon">&#xc62b;</i>
                    <div class="name">radio</div>
                    <div class="code">&amp;#xc62b;</div>
                    <div class="fontclass">.radio-checked</div>
                </li>
            
                <li>
                <i class="icon icon">&#xc637;</i>
                    <div class="name">清空</div>
                    <div class="code">&amp;#xc637;</div>
                    <div class="fontclass">.clear</div>
                </li>
            
                <li>
                <i class="icon icon">&#xc609;</i>
                    <div class="name">template - 副本_复制</div>
                    <div class="code">&amp;#xc609;</div>
                    <div class="fontclass">.close</div>
                </li>
            
        </ul>


        <div class="helps">
            第一步：使用font-face声明字体
            <pre>
@font-face {font-family: 'icon';
    src: url('iconfont.eot'); /* IE9*/
    src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('iconfont.woff') format('woff'), /* chrome、firefox */
    url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('iconfont.svg#icon') format('svg'); /* iOS 4.1- */
}
</pre>
第二步：定义使用iconfont的样式
            <pre>
.icon{
    font-family:"icon" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}
</pre>
第三步：挑选相应图标并获取字体编码，应用于页面
<pre>
&lt;i class="icon"&gt;&amp;#x33;&lt;/i&gt;
</pre>
        </div>

    </div>
</body>
</html>
